<template>
    <c-list-template title="供应商会员管理" :operation="true">
        <template slot="search">
            <el-row :gutter="5">
                <el-col :span="6" class="flex-center">
                    <div class="mr-lg">供应商名称</div>
                    <el-input v-model="querys.name" placeholder="请输入供应商名称" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="6" class="flex-center">
                    <div class="mr-lg">手机号</div>
                    <el-input v-model="querys.mobile" placeholder="请输入手机号" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="12" class="flex-x-end">
                    <el-button icon="el-icon-search" type="primary" @click="handleSelect">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </template>
        <template slot="operation">
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
        </template>
        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading">
                <el-table-column label="序号" align="center" width="80" type="index" />
                <el-table-column label="供应商名称" width="300" align="center" prop="name" />
                <el-table-column label="法人" width="300" align="center" prop="legal" />
                <el-table-column label="手机号" width="150" align="center" prop="mobile" />
                <!-- <el-table-column width="200" label="当前会员金额（元）" align="right">
                    <template slot-scope="scope">
                        {{ scope.row.currentAmount | thousands }}
                    </template>
                </el-table-column>
                <el-table-column label="会员有效期" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.timeExpiry | dateYMDHMSFormat }}
                    </template>
                </el-table-column> -->
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.timeCreate | dateYMDHMSFormat }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr-lg" @click="handleChargeMoney(scope.row)">充值</el-link>
                        <!-- <el-link type="primary" class="mr-lg" @click="handleEdit(scope.row)">编辑</el-link> -->
                        <el-link type="primary" @click="handleDetails(scope.row)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </template>
        <c-dealer-form ref="cDealerForm" />
        <c-charge-money ref="cChargeMoney" />
    </c-list-template>
</template>
<script>
import cChargeMoney from "./components/c-charge-money.vue";
import cDealerForm from "./components/c-dealer-form.vue";
export default {
    components: {
        cDealerForm,
        cChargeMoney,
    },
    data () {
        return {
            total: 0,
            tableData: [
                {
                    "id": "1667007932076650497",
                    "name": "温州杂草科技有限公司",
                    "mobile": "18202515820",
                    "grade": null,
                    "currentAmount": 0.00,
                    "timeExpiry": null,
                    "timeCreate": "2023-06-09T03:20:15.000+00:00"
                },
            ],
            querys: {
                current: 1,
                size: 10,
            },
            loading: false,
        };
    },
    mounted () {
        // this.tableList();
    },
    methods: {
        handleChargeMoney (item) {
            this.$refs.cChargeMoney.handleOpen(item);
        },
        handleAdd () {
            this.$refs.cDealerForm.handleOpen();
        },
        handleEdit (item) {
            item.view = false
            this.$refs.cDealerForm.handleOpen(item);
        },
        handleDetails (item) {
            item.view = true
            this.$refs.cDealerForm.handleOpen(item);
        },
        // tableList () {
        //     this.loading = true;
        //     const params = JSON.parse(JSON.stringify(this.querys));
        //     const url = "/DealerAmount/page";
        //     this.$get({ url, params }).then((res) => {
        //         this.tableData = res.records;
        //         this.total = res.total * 1;
        //         this.loading = false;
        //     });
        // },
        handleReset () {
            this.querys = {
                current: 1,
                size: 10,
            };
            this.tableList();
        },
        handleSelect () {
            this.querys.current = 1;
            this.tableList();
        },
        handleSizeChange (val) {
            this.querys.size = val;
            this.tableList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            this.tableList();
        },
    },
};
</script>
